.fx-avatar {
  position: relative;
  display: inline-block;
  color: $avatar-color;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-color: $avatar-background;

  &.large {
    width: $height-large;
    height: $height-large;
    line-height: $height-large;
  }

  &.middle {
    width: $height-middle;
    height: $height-middle;
    line-height: $height-middle;
  }

  &.default {
    width: $height-default;
    height: $height-default;
    line-height: $height-default;
  }

  &.mini {
    width: $height-mini;
    height: $height-mini;
    line-height: $height-mini;
  }

  &.square {
    border-radius: $border-radius-default;
  }

  &.circle {
    border-radius: 50%;
  }

  &.background {
    background-color: $avatar-background;
  }

  > img {
    width: 100%;
    height: 100%;
    border-radius: $border-radius-default;
  }
}
